<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
		xmlns:h="http://java.sun.com/jsf/html"  
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich">  

    <h:body>        
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="Livres"></h:outputText>
            </f:facet>
            <h:form id="formBooks">
                <rich:dataGrid id="formBooksDataGrid" value="#{bookManager.getMostSoldBooks()}" var="book" columns="5" elements="10" styleClass="center myPanelGrid" >
                    <rich:panel bodyClass="pbody">
                        <f:facet id="formBooksDataGridHeader" name="header">
                            <span class="doTooltip #{(bookManager.mostSoldBooks.indexOf(book)+1 == 1)? 'gold label' : (bookManager.mostSoldBooks.indexOf(book)+1 == 2)? 'silver label' : (bookManager.mostSoldBooks.indexOf(book)+1 == 3)? 'bronze label' : ''}" title="#{book.title}">
                                <h:outputText value="#{bookManager.mostSoldBooks.indexOf(book)+1}"></h:outputText>
                                <h:outputText value=" - #{(book.title.length() gt 20)? book.title.substring(0, 20).concat('...') : book.title}"></h:outputText>
                            </span>
                        </f:facet>
                        <h:panelGrid id="formBooksDataGridPanel" columns="2" cellpadding="10">
                            <h:outputText value="Prix :" styleClass="label"></h:outputText>
                            <h:outputText value="#{book.price} €" />

                            <h:outputText value="Résumé :" styleClass="label"></h:outputText>
                            <h:outputText value="&lt;span class='doPopoverTop b blue' title='#{book.title}' data-content='#{book.summary}'>Afficher&lt;/span>" escape="false" />

                            <h:outputText value="Auteur(s) :" styleClass="label"></h:outputText>
                                <h:outputText value="#{(bookManager.countAuthorsByBook(book) > 1)? '&lt;i class=icon-user>&lt;/i>&nbsp;' : ''}#{bookManager.getBookAuthors(book, (bookManager.countAuthorsByBook(book) > 1)? '&lt;br />&lt;i class=icon-user>&lt;/i>&nbsp;' : '&lt;i class=icon-user>&lt;/i>&nbsp;', true, true)}" escape="false" />

                            <h:outputText value="Éditeur :" styleClass="label"></h:outputText>
                            <h:outputText value="#{book.editor}" />

                            <h:outputText value="Date de sortie :" styleClass="label"></h:outputText>
                            <h:outputText value="#{book.publicationDate}" ><f:convertDateTime pattern="dd/MM/YYYY"/></h:outputText>

                            <a id="ficheDetaillée-#{bookManager.mostSoldBooks.indexOf(book)+1}" href="#" class="b btn btn-small btn-info doTooltip" data-toggle="modal" data-target="#modal-#{bookManager.mostSoldBooks.indexOf(book)+1}" title="Afficher la fiche détaillée (Pop-Up)" >Fiche détaillée</a>
                            <div id="modal-#{bookManager.mostSoldBooks.indexOf(book)+1}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="ficheDetaillée-#{bookManager.mostSoldBooks.indexOf(book)+1}" aria-hidden="true">
                                <div class="modal-header well">
                                    <button type="button" class="close orange" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h3 id="myModalLabel"><i class="blue">#{book.title}</i></h3>
                                </div>
                                <div class="modal-body white well" style="width: 90%;margin-left: 2%;">
                                    <b class="blue">Titre original</b>:  #{book.title}<br /><br />
                                    <b class="blue">Prix</b>:  #{book.price} €<br /><br />
                                    <b class="blue">Auteur(s)</b>:  #{bookManager.getBookAuthors(book, ', ', false)}<br /><br />
                                    <b class="blue">Éditeur</b>:  #{book.editor}<br /><br />
                                    <b class="blue">Résumé</b>:  #{book.summary}<br /><br />
                                    <b class="blue">Table des matières</b>:  #{book.contents}<br /><br />
                                    <b class="blue">Date de sortie</b>:  #{book.publicationDate.toGMTString()}<br />
                                </div>
                                <div class="modal-footer">
                                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                                </div>
                            </div>
                            
                            <h:commandLink action="#{cartSession.addInvoice(book, 1)}" styleClass="b green">
                                <h:outputText value="&lt;span class='doPopoverTop btn btn-small btn-warning' title='Attention !' data-content='Il ne reste plus que #{book.stock} exemplaire(s) !'>Ajouter au panier&lt;/span>" escape="false" rendered="#{book.stock le book.threshold}"></h:outputText>
                                <h:outputText value="&lt;span class='doTooltip btn btn-small btn-success' title='Article disponible !'>Ajouter au panier&lt;/span>" escape="false" rendered="#{book.stock gt book.threshold}"></h:outputText>
                            </h:commandLink>
                        </h:panelGrid>
                    </rich:panel>
                </rich:dataGrid>
            </h:form>
        </rich:panel>
    </h:body>
</html>

